<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'

const store = useStore()
const router = useRouter()
const loginLoader = ref(false)

onMounted(() => {
  loginLoader.value = false
})

const loginForm = reactive({
  username: '',
  password: ''
})

async function handleLogin() {
  try {
    loginLoader.value = true
    await store.dispatch('LoginUser', loginForm)
    router.push('/main')
    loginLoader.value = false
  } catch (error) {
    console.log(error)
    loginLoader.value = false
  }
}
</script>

<template>
  <opt-component />
  <div v-loading="loginLoader">
    <div
      class="font-sans text-3xl subpixel-antialiased font-bold flex justify-center justify-items-center gap-2 hover:cursor-default mt-20 mb-20"
    >
      <svg class="h-8 w-8" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
        <path
          d="M217.9 356.5c-14.1 0-25.5 11.4-25.5 25.5s11.4 25.5 25.5 25.5 25.5-11.4 25.5-25.5-11.4-25.5-25.5-25.5zM217.4 433.7c-11.2 0-20.4 9.2-20.4 20.4v174.4c0 11.2 9.2 20.4 20.4 20.4s20.4-9.2 20.4-20.4V454.1c0-11.2-9.2-20.4-20.4-20.4z"
          fill="#6B400D"
        ></path>
        <path
          d="M878.7 379.5v-86c0-96.3-57.5-153.7-153.7-153.7H218c-96.3 0-153.7 57.5-153.7 153.7v320.7C64.3 710.5 121.8 768 218 768h45.8v120.4L449.9 768h11.2c17.2 11.3 39 17.5 64.6 17.5h161.6l130.7 85v-85.1h33.5c66.6 0 107.9-41.3 107.9-107.9V484.8c-0.1-56.9-30.3-95.3-80.7-105.3zM417.8 484.8v192.8c0 16.2 2.5 31 7.2 44l-106.1 70.1v-74.9h-101c-67.7-0.3-102.2-34.8-102.5-102.5V293.5c0.3-67.7 34.8-102.2 102.5-102.5H725c67.7 0.3 102.2 34.8 102.5 102.5v83.3H525.7c-66.5 0.1-107.9 41.4-107.9 108z m490.4 192.7c-0.2 38.6-18.2 56.6-56.7 56.7h-87.2v40.3l-61-40.3H525.7c-38.5-0.2-56.6-18.2-56.7-56.7V484.8c0.2-38.6 18.2-56.6 56.7-56.7h325.7c38.5 0.2 56.6 18.2 56.7 56.7v192.7z"
          fill="#6B400D"
        ></path>
        <path
          d="M851.4 428.1H525.7c-38.5 0.2-56.6 18.2-56.7 56.7v192.8c0.2 38.5 18.2 56.6 56.7 56.7h177.5l61 40.3v-40.3h87.2c38.5-0.2 56.6-18.2 56.7-56.7V484.8c-0.1-38.6-18.1-56.6-56.7-56.7zM567 627.4c-21.1 0-38.3-17.2-38.3-38.3 0-21.1 17.2-38.3 38.3-38.3 21.1 0 38.3 17.2 38.3 38.3 0 21.1-17.2 38.3-38.3 38.3z m122.2 0c-21.1 0-38.3-17.2-38.3-38.3 0-21.1 17.2-38.3 38.3-38.3 21.1 0 38.3 17.2 38.3 38.3 0 21.1-17.2 38.3-38.3 38.3z m122.3 0c-21.1 0-38.3-17.2-38.3-38.3 0-21.1 17.2-38.3 38.3-38.3 21.1 0 38.3 17.2 38.3 38.3 0 21.1-17.2 38.3-38.3 38.3z"
          fill="#FFD524"
        ></path>
        <path
          d="M567 550.8c-21.1 0-38.3 17.2-38.3 38.3 0 21.1 17.2 38.3 38.3 38.3 21.1 0 38.3-17.2 38.3-38.3 0-21.1-17.2-38.3-38.3-38.3zM689.2 550.8c-21.1 0-38.3 17.2-38.3 38.3 0 21.1 17.2 38.3 38.3 38.3 21.1 0 38.3-17.2 38.3-38.3 0-21.1-17.2-38.3-38.3-38.3zM811.5 550.8c-21.1 0-38.3 17.2-38.3 38.3 0 21.1 17.2 38.3 38.3 38.3 21.1 0 38.3-17.2 38.3-38.3 0-21.1-17.2-38.3-38.3-38.3z"
          fill="#6B400D"
        ></path>
      </svg>
      Chat&nbsp;Chat
    </div>

    <form class="ml-10 mr-10">
      <div class="grid grid-cols-1 gap-x-6 gap-y-12">
        <div class="relative">
          <label for="username" class="absolute -top-7 left-0 text-gray-500">用户名</label>
          <input
            id="username"
            v-model="loginForm.username"
            type="text"
            name="username"
            placeholder="请输入用户名"
            class="placeholder:text-slate-400 block bg-white w-full border border-slate-300 rounded-md py-2 pl-5 pr-5 shadow-sm focus:outline-none focus:border-sky-500 focus:ring-sky-500 focus:ring-1"
          />
        </div>
        <div class="relative">
          <label for="password" class="absolute -top-7 left-0 text-gray-500">密码</label>
          <input
            id="password"
            v-model="loginForm.password"
            type="password"
            name="password"
            placeholder="请输入密码"
            class="placeholder:text-slate-400 block bg-white w-full border border-slate-300 rounded-md py-2 pl-5 pr-5 shadow-sm focus:outline-none focus:border-sky-500 focus:ring-sky-500 focus:ring-1"
          />
          <div class="flex justify-between text-sm mt-3">
            <router-link
              to="/forgetPwd"
              class="text-slate-600 hover:text-sky-500 hover:cursor-pointer"
              >忘记密码
            </router-link>
            <router-link
              to="/register"
              class="text-slate-600 hover:text-sky-500 hover:cursor-pointer"
              >注册帐号
            </router-link>
          </div>
        </div>
        <button
          type="button"
          class="h-9 w-full rounded-md text-white text-xl bg-sky-500 hover:bg-sky-400 shadow-lg outline-none"
          @click="handleLogin"
        >
          登&nbsp;录
        </button>
      </div>
    </form>
  </div>
</template>

<style scoped></style>
